<template>
    <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
        <el-form :inline="true" :model="searchForm" class="mb-4">
            <el-form-item v-for="field in searchFields" :key="field.prop" :label="field.label">
                <el-input v-if="field.type === 'input'" v-model="searchForm[field.prop]" placeholder="请输入" clearable />

                <el-select v-else-if="field.type === 'select'" v-model="searchForm[field.prop]" placeholder="请选择"
                    :style="{ width: '200px' }">
                    <el-option v-for="option in field.options" :key="option.value" :label="option.label"
                        :value="option.value" />
                </el-select>

                <el-date-picker v-else-if="field.type === 'date-range'" v-model="searchForm[field.prop]"
                    type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
        </el-form>

        <div class="btnseacch">
            <div v-if="searchFields.length > 0">
                <el-button @click="resetForm">&nbsp;&nbsp;&nbsp;&nbsp;重置&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
                <el-button type="primary"
                    @click="handleSearch">&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
            </div>

            <div>
                <!-- <el-button type="primary" @click="addRow">&nbsp;&nbsp;&nbsp;&nbsp;新增&nbsp;&nbsp;&nbsp;&nbsp;</el-button> -->
                <el-button v-if="props.deletSome" type="primary" @click="deletSome">批量删除</el-button>
            </div>
        </div>

    </div>
</template>

<script setup>
import { defineProps, defineEmits, reactive, toRefs } from 'vue';

const props = defineProps({
    searchFields: {
        type: Array,
        required: true,
    },
    deletSome: {
        type: Boolean,
        default: false,
    }
});

const emits = defineEmits(['search', 'reset']);

// 搜索表单
const searchForm = reactive({});

// 初始化搜索表单
const initSearchForm = () => {
    props.searchFields.forEach(field => {
        searchForm[field.prop] = '';
    });
};

// 处理搜索
const handleSearch = () => {
    emits('search', { ...searchForm });
};
function addRow() {
    emits('addRow', "add");
}
// 重置表单
const resetForm = () => {
    initSearchForm();
    emits('reset');
};

function deletSome() {
    emits('deletSome');
}
// 初始化表单
initSearchForm();
</script>

<style scoped>
.el-form-item {
    margin-right: 20px;
}

.btnseacch {
    display: flex;
    justify-content: space-between;
}
</style>
  
